$(window).load(function(){
	var STYLES = {
	    NONE: '',
	    RED: '-red', 
	    BLUE: '-blue', 
	    DARK: '-dark', 
	    LIGHT: '-light', 
	    GREEN: '-green', 
	    JTOOLS: '-jtools', 
	    PLAIN: '-plain', 
	    YOUTUBE: '-youtube', 
	    CLUETIP: '-cluetip', 
	    TIPSY: '-tipsy', 
	    TIPPED: '-tipped', 
	    BOOTSTRAP: '-bootstrap',
	    ROUNDED: '-rounded'
	};
	 
	var FOCUS = {
	    TOP_LEFT: 'top left', 
	    TOP_RIGHT: 'top right', 
	    TOP_CENTER: 'top center',
	    BOTTOM_LEFT: 'bottom left', 
	    BOTTOM_RIGHT: 'bottom right', 
	    BOTTOM_CENTER: 'bottom center',
	    RIGHT_CENTER: 'right center', 
	    RIGHT_TOP: 'right top', 
	    RIGHT_BOTTOM: 'right bottom',
	    LEFT_CENTER: 'left center', 
	    LEFT_TOP: 'left top', 
	    LEFT_BOTTOM: 'left bottom', 
	    CENTER: 'center'
	};
	 
	var steps = [
	    { target: $('#test-1'), title: 'Welcome to step 1!', content: 'Description...', tipFocus: FOCUS.LEFT_TOP, elFocus: FOCUS.BOTTOM_RIGHT, style: STYLES.DARK },
	    { target: $('#test-2'), title: 'Step 2...', content: 'We are...', tipFocus: FOCUS.LEFT_TOP, elFocus: FOCUS.BOTTOM_RIGHT, style: STYLES.DARK },
	    { target: $('#test-3'), title: 'and now Step 3', content: 'More text...', tipFocus: FOCUS.LEFT_TOP, elFocus: FOCUS.BOTTOM_RIGHT, style: STYLES.DARK },
	    { target: $('#test-4'), title: 'Step 4', content: 'More text...', tipFocus: FOCUS.LEFT_TOP, elFocus: FOCUS.BOTTOM_RIGHT, style: STYLES.DARK },
	    { target: $('#test-5'), title: 'Finally, Step 5', content: 'Even more text...', tipFocus: FOCUS.LEFT_TOP, elFocus: FOCUS.BOTTOM_RIGHT, style: STYLES.DARK }
	];
	 
	$(document).ready(function() {
	    // Set up tutorial
	    $(document.body).qtip({
	        id: 'step',
	        // Give it an ID of ui-tooltip-step so we an identify it easily
	        content: {
	            text: steps[0].content,
	            // Use first steps content...
	            title: {
	                text: steps[0].title,
	                // ...and title
	                button: true
	            }
	        },
	        position: {
	            my: steps[0].tipFocus,
	            at: steps[0].elFocus,
	            target: steps[0].target,
	            // Also use first steps position target...
	            viewport: $(window) // ...and make sure it stays on-screen if possible
	        },
	        show: {
	            event: false,
	            // Only show when show() is called manually
	            ready: true // Also show on page load
	        },
	        hide: false,
	        // Don't' hide unless we call hide()
	        events: {
	            render: function(event, api) {
	                // Grab tooltip element
	                var tooltip = api.elements.tooltip;
	 
	                // Track the current step in the API
	                api.step = 0;
	 
	                // Bind custom custom events we can fire to step forward/back
	                tooltip.bind('next prev', function(event) {
	                    // Increase/decrease step depending on the event fired
	                    api.step += event.type === 'next' ? 1 : -1;
	                    api.step = Math.min(steps.length - 1, Math.max(0, api.step));
	 
	                    // Set new step properties
	                    var current = steps[api.step];
	                    if (current) {
	                        api.set({
	                            'content.text': current.content,
	                            'content.title.text': current.title,
	                            'position.target': current.target,
	                            'position.my': current.tipFocus,
	                            'position.at': current.elFocus,
	                            'style.classes': 'ui-tooltip-shadow ui-tooltip' + current.style
	                        });
	                    }
	                });
	            }
	        },
	        style: {
	            classes: 'ui-tooltip-shadow ui-tooltip' + steps[0].style,
	            def: false
	        }
	    });
	 
	    // Inject control div
	    var $ctrlDiv = $('<div id="t-btm-center-menu">'+
	                         '<ul>'+
	                            '<li><a id="start" href="#">Begin</a></li>'+
	                            '<li><a id="prev" href="#">&lt; Prev</a></li>'+
	                            '<li><a id="next" href="#">Next &gt;</a></li>'+
	                            '<li><a id="end" href="#">End</a></li>'+
	                        '</ul>'+
	                     '</div>');
	    $('body').append($ctrlDiv);
	 
	    // Setup the next/prev links
	    $('#next, #prev').bind('click', function(event) {
	        var tooltip = $('#ui-tooltip-step');
	 
	        // If it isn't visible don't do anything
	 
	 
	        // Trigger the tooltip event
	        tooltip.triggerHandler(this.id);
	 
	        // Stop the link from actually clicking
	        event.preventDefault();
	    });
	 
	    // Setup the start/end links
	    $('#start, #end').bind('click', function(event) {
	        var api = $('#ui-tooltip-step').qtip();
	 
	        // Reset the API step to -1
	        api.step = -1;
	 
	        if (this.id === 'start') {
	            // Trigger next handler to update content with first step
	            api.elements.tooltip.triggerHandler('next');
	 
	            // Show tooltip and next/prev buttons
	            api.show();
	            $('#next, #prev').show();
	        }
	 
	        // If we're ending the tour, hide the tooltip and the next/prev links
	        else {
	            api.hide();
	            $('#next, #prev').hide();
	        }
	        // Stop the link from actually clicking
	        event.preventDefault();
	    });
	});
}); 